<template>
  <div class="main">
    <header>
      
      <div>李白诗词可视化</div>
      <div class="home-title">
        <i class="el-icon-date" style="margin-right: 2%"></i>
        <strong>当前时间:</strong>&nbsp;&nbsp;{{ nowTime }}
      </div>
    </header>
    <router-view class="router"></router-view>
  </div>
</template>

<script>
import { useStore } from "vuex";

export default {
  name: "App",
  data: function () {
    return {
      views: [
        { id: 1, name: "Home", type: "success" },
        { id: 2, name: "搜素", type: "" },
        { id: 3, name: "轨迹", type: "" },
        { id: 4, name: "人物星图", type: "" },
        // { id: 5, name: "测试", type: "" }
      ],
      nowTime: new Date().toLocaleString(),
    };
  },
  created() {
    this.getCurrentDate();
  },
  beforeUnmount() {
    if (this.nowTime) {
      clearInterval(this.getTimesInterval);
    }
  },
  setup() {
    const store = useStore();
    return { store };
  },
  methods: {
    getCurrentDate() {
      setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval: function () {
      let date = new Date().toLocaleString();
      this.nowTime = date;
    },
    gotoRouter(routerName) {
      this.$router.push({ name: routerName });
      for (let i = 0; i < this.views.length; i++) {
        if (this.views[i].name === routerName) {
          this.views[i].type = "success";
          this.store.state.currentRouter = i + 1;
        } else this.views[i].type = "";
      }
    },
  },
  mounted() {
    this.gotoRouter("Home");
  },
};
</script>

<style scoped>

#home-title {
  width: 34%;
  text-align: center;
}

#home-time {
  width: 32%;
}

.main {
  height: 100%;
  width: 100%;
  position: absolute;
  background: url(./assets/picture/app/bg2.png) center center no-repeat ;
  background-size: cover;
  display: flex;
  flex-direction: column;
  /* min-width: 1725px; */
  /* min-height: 1258px; */
}

header {
  margin: 1% 2% 1% 2%;
  display: flex;
  justify-content: space-between;
  height: 6vh;
  line-height: 6vh;
  font-size: 2vh;
  /* 盒子阴影 */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
  border-radius: 100px;
}

header > :nth-child(1) {
  margin-left: 44%;
  /* margin-right: 2%; */
  text-align: center;
  font-family: 楷体;
  font-size: 3vh;
  line-height: 6vh;
}

header > :nth-child(2) {
  width: 24%;
  text-align: center;
  font-size: 1.5vh;
  line-height: 6vh;
}

.router {
  margin: 0% 2%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
  height: 88%;
  width: 96%;
}
</style>
